import NotAccessPage from '@/components/NotAccessPage';
import { showTab } from '@/services/api/api-assess-week-collect';
import { PageContainer } from '@ant-design/pro-components';
import { useAccess } from '@umijs/max';
import React, { useEffect, useState } from 'react';
import TableAppRank from '../app/rank/TableAppRank';
import TabAppRecord from '../app/record/TabAppRecord';
import TableArticleRank from '../article/rank/TableArticleRank';
import TabArticleRecord from '../article/record/TabArticleRecord';

interface PageContainerCollectProps {}

const PageContainerCollect: React.FC<PageContainerCollectProps> = ({}) => {
  const access = useAccess();

  /**
   * 搜索参数
   */
  const [tabActiveKey, setTabActiveKeyState] = useState<string>('tabArticle');

  const [showKeys, setShowKeysState] = useState<string[]>([]);

  const containerArticle = () => {
    if (access.传播质效x页面 && access.传播质效x配置x管理员) {
      return <TableArticleRank />;
    } else if (access.传播质效x页面 && access.传播质效x配置x运营员) {
      return <TabArticleRecord />;
    } else {
      return <NotAccessPage />;
    }
  };
  const containerApp = () => {
    if (access.传播质效x页面 && access.传播质效x配置x管理员) {
      return <TableAppRank />;
    } else if (access.传播质效x页面 && access.传播质效x配置x运营员) {
      return <TabAppRecord />;
    } else {
      return <NotAccessPage />;
    }
  };
  /**
   * 展示tab
   * @param key
   */
  const loadShowTab = async () => {
    try {
      const response = await showTab();
      if (response.code === 0) {
        setShowKeysState(response.data);
      }
    } catch (error) {}
  };

  useEffect(() => {
    loadShowTab();
  }, []);

  return (
    <PageContainer
      loading={showKeys?.length == 0}
      tabList={showKeys?.map((item) => {
        let name = '';
        if (item == 'tabArticle') {
          name = '每周发稿情况';
        } else if (item == 'tabApp') {
          name = '客户端汇总';
        }
        return {
          tab: name,
          key: item,
        };
      })}
      onTabChange={setTabActiveKeyState}
      tabBarExtraContent={{
        left: (
          <span
            style={{
              marginInlineEnd: '12px',
              color: 'rgba(0, 0, 0, 0.88)',
              fontWeight: 600,
              fontSize: 20,
              height: 48,
              paddingRight: 35,
              marginBottom: 10,
            }}
            title="全域线索"
          ></span>
        ),
      }}
    >
      {tabActiveKey === 'tabArticle' && containerArticle()}
      {tabActiveKey === 'tabApp' && containerApp()}
    </PageContainer>
  );
};

export default PageContainerCollect;
